body,html{
	height: 100%;
}
#all{
	height: 100%;
	overflow-x: hidden;
	font-family: "楷书";
}
.nav{
	display: block;
	width: 40px;
	height: 40px;
	position: fixed;
	top: 20px;
	left: 10px;
	z-index: 90;
}
.nav .nav-bar{
	display: block;
	width: 30px;
	border-top: 5px solid #FFFFFF;
	border-bottom: 5px solid transparent;
}
#nav-box:target .nav-menu{
	top: 60px;
}
#nav-box:target .nav{
	display: none;
}
.nav-x{
	display: block;
	width: 40px;
	height: 40px;
	position: fixed;
	top: 20px;
	left: 10px;
	z-index: 90;
	display: none;
}
#nav-box:target .nav-x{
	display: block;
	width: 40px;
	height: 40px;
	position: fixed;
	top: 20px;
	left: 10px;
	z-index: 90;;
}
.nav-menu{
	position: absolute;
	top: -600px;
	left: 0px;
	width: 256px;
	height: 534px;
	background-color: rgba(0,0,0,0.5);
	transition: 0.5s linear;
	box-sizing: border-box;
	padding-left: 50px;
	z-index: 99;
}
.nav-menu a{
	display: block;
	font-size: 24px;
	font-weight: bold;
	font-family: "隶书";
	color: #FFFFFF;
	line-height: 80px;
	z-index: 99;
}
.nav-x .nav-bar:nth-of-type(1){
	position: absolute;
	top: 12px;
	left: 0px;
	display: block;
	width: 30px;
	border-top: 5px solid #FFFFFF;
	border-bottom: 5px solid transparent;
	transform: rotate(45deg);
}
.nav-x .nav-bar:nth-of-type(2){
	position: absolute;
	top: 12px;
	left: 3px;
	display: block;
	width: 30px;
	border-top: 5px solid #FFFFFF;
	border-bottom: 5px solid transparent;
	transform: rotate(-45deg);
}
#nav-box1:target .nav-menu{
	top: -600px;
}
.first{
	overflow: hidden;
	position: relative;
	height: 52vw;
	background-image: url(../images/bg.jpg);
	background-size: 100%;
}
.first div{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -110px;
	margin-left: -476px;
	background-image: url(../images/fmen.jpg);
	-webkit-background-clip:text ;
}
.first h1{
	color: transparent;
	font: bold 80px/80px "楷体";
	text-align: center;
}
.first h2{
	color: transparent;
	font: bold 60px/70px "EB Garamond";
	text-align: center;
}
.second{
	overflow: hidden;
	position: relative;
	height: 52vw;
	background-color: #141516;
	color: #FFFFFF;
}
.second h1{
	text-align: center;
	font-size: 32px;
	font-family: "隶书";
	line-height: 120px;
	color: #FFFFFF;
}
.second .game{
	position: relative;
	float: left;
	width: 26%;
	height: 800px;
	background: url(../images/cardface.png) no-repeat center;
	margin-left: 100px;
	border: 1px solid #CCC2C0;
	border-radius: 3px;
	transition: 1s linear;
}
.second .game h2{
	float: left;
	padding: 20px 10px;
	writing-mode: tb-rl;
	font-size: 24px;
	letter-spacing: 5px;
	background-color: rgba(255,255,255,0.3);
	border-bottom-right-radius: 10px;
}
.second .game img{
	position: absolute;
	top: 0;
	left: 0;
	transform: rotatey(180deg);
	opacity: 0;
	transition: 0.5s linear;
	
}
.second .game:hover{
	transform: rotatey(180deg);
}
.second .game:hover img{
	transform: rotatey(180deg);
	opacity: 1;
}
.second .sport{
	position: relative;
	float: left;
	width: 26%;
	height: 800px;
	background-color: #008000;
	margin-top: 50px;
	margin-left: 100px;
	background: url(../images/cardface.png) no-repeat center;
	border: 1px solid #CCC2C0;
	border-radius: 3px;
	text-align: center;
	transition: 1s linear;
}
.second .sport img{
	position: absolute;
	top: 0;
	left: 0;
	transform: rotatey(180deg);
	opacity: 0;
	transition: 0.5s linear;
}
.second .sport:hover{
	transform: rotatey(180deg);
}
.second .sport:hover img{
	transform: rotatey(180deg);
	opacity: 1;
}
.second .sport h2{
	width: 194px;
	display: inline-block;
	text-align: center;
	padding: 10px 10px;
	font-size: 24px;
	letter-spacing: 5px;
	background-color: rgba(255,255,255,0.3);
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
.second .cartoon{
	position: relative;
	float: left;
	width: 26%;
	height: 800px;
	background-color: #0000FF;
	margin-left: 100px;
	background: url(../images/cardface.png) no-repeat center;
	border: 1px solid #CCC2C0;
	border-radius: 3px;
	transition: 1s linear;
}
.second .cartoon img{
	position: absolute;
	top: 0;
	left: 0;
	width: 500px;
	height: 800px;
	transform: rotatey(180deg);
	opacity: 0;
	transition: 0.5s linear;
}
.second .cartoon:hover{
	transform: rotatey(180deg);
}
.second .cartoon:hover img{
	transform: rotatey(180deg);
	opacity: 1;
}
.second .cartoon h2{
	float: right;
	padding: 20px 10px;
	writing-mode: tb-rl;
	font-size: 24px;
	letter-spacing: 5px;
	background-color: rgba(255,255,255,0.3);
	border-bottom-left-radius: 10px;
}
.third{
	overflow: hidden;
	position: relative;
	height: 52vw;
	background: url(../images/bk.jpg) no-repeat center;
	color: #FFFFFF;
}
.third div{
	background: url(../images/qv.png) no-repeat center;
	
}
.third div:nth-of-type(1) ul{
	position: relative;
	top: -100px;
	left: 100px;
	font-size: 16px;
	color: #000000;
	font-weight: bold;
}
.third div:nth-of-type(2) ul,
.third div:nth-of-type(5) ul{
	position: relative;
	top: -70px;
	left: 70px;
	font-size: 16px;
	color: #000000;
	font-weight: bold;
}
.third div:nth-of-type(4) ul{
	position: relative;
	top: -120px;
	left: 50px;
	font-size: 16px;
	color: #000000;
	font-weight: bold;
}
.third div:hover ul{
	opacity: 1;
}
.third div ul{
	position: relative;
	top: -120px;
	left: 80px;
	font-size: 16px;
	color: #000000;
	font-weight: bold;
	opacity: 0;
	transition: 1s linear;
}
.third .originiums{
	position: absolute;
	top: 200px;
	left: 150px;
	width: 500px;
	height: 500px;
	background-size: 600px;
}
.third .originiums img{
	width: 500px;
	transform: scale(1.2);
	transition: 0.3s linear;
}
.third .originiums:hover img{
	transform: scale(1.3);
}
.third .reunion{
	position: absolute;
	top: 100px;
	left: 750px;
	width: 300px;
	height: 300px;
	background-size: 300px;
}
.third .reunion img{
	position: relative;
	top: -50px;
	width: 300px;
	transform: scale(1.0);
	transition: 0.3s linear;
}
.third .reunion:hover img{
	transform: scale(1.1);
}
.third .nimadic-city{
	position: absolute;
	top: 70px;
	left: 1200px;
	width: 400px;
	height: 400px;
	background-size: 400px;
}
.third .nimadic-city img{
	position: relative;
	top: -70px;
	left: 10px;
	width: 400px;
	transform: scale(1.0);
	transition: 0.3s linear;
}
.third .nimadic-city:hover img{
	transform: scale(1.1);
}
.third .originiums-arts{
	position: absolute;
	top: 600px;
	left: 650px;
	width: 300px;
	height: 300px;
	background-size: 350px;
}
.third .originiums-arts img{
	position: relative;
	top: -70px;
	left: -50px;
	width: 400px;
	transform: scale(1.0);
	transition: 0.3s linear;
}
.third .originiums-arts:hover img{
	transform: scale(1.1);
}
.third .infected{
	position: absolute;
	top: 500px;
	left: 1050px;
	width: 300px;
	height: 300px;
	background-size: 300px;
}
.third .infected img{
	position: relative;
	top: -40px;
	left: -5px;
	width: 300px;
	transform: scale(1.0);
	transition: 0.3s linear;
}
.third .infected:hover img{
	transform: scale(1.1);
}
.third .rhodes-island{
	position: absolute;
	top: 500px;
	left: 1400px;
	width: 400px;
	height: 400px;
	background-size: 500px;
}
.third .rhodes-island img{
	width: 450px;
	transform: scale(1.0);
	transition: 0.3s linear;
}
.third .rhodes-island:hover img{
	transform: scale(1.1);
}
.forth{
	overflow: hidden;
	position: relative;
	height: 52vw;
	background-color: #141516;
	color: #FFFFFF;
	overflow: hidden;
}
.arknights{
	width: 1400px;
	height: 697px;
	margin: 200px auto 0;
	position: relative;
	overflow: hidden;
}
.arknights div{
	overflow: hidden;
	width: 280px;
}
.arknights div img{
	width: 100%;
	height: 100%;
	transition: 0.5s linear;
}
.arknights div:hover img{
	transform: scale(1.05);
}
.arknights div:nth-of-type(1){
	position: absolute;
	top: 0;
	left: 0;
	height: 442px;
}
.arknights div:nth-of-type(2){
	position: absolute;
	top: 442px;
	left: 0;
}
.arknights div:nth-of-type(3){
	position: absolute;
	top: 0px;
	height: 150px;
	left: 280px;
}
.arknights div:nth-of-type(4){
	position: absolute;
	height: 260px;
	top: 150px;
	left: 280px;
}
.arknights div:nth-of-type(5){
	position: absolute;
	height: 160px;
	top: 380px;
	left: 280px;
}
.arknights div:nth-of-type(6){
	position: absolute;
	height: 165px;
	top: 540px;
	left: 280px;
}
.arknights div:nth-of-type(7){
	position: absolute;
	top: 0;
	left: 560px;
	height: 442px;
}
.arknights div:nth-of-type(8){
	position: absolute;
	top: 442px;
	left: 560px;
}
.arknights div:nth-of-type(9){
	position: absolute;
	height: 260px;
	top: 0px;
	left:840px;
}
.arknights div:nth-of-type(10){
	position: absolute;
	height: 150px;
	top: 260px;
	left: 840px;
}
.arknights div:nth-of-type(11){
	position: absolute;
	height: 150px;
	top: 410px;
	left: 840px;
}
.arknights div:nth-of-type(12){
	position: absolute;
	height: 150px;
	top: 560px;
	left: 840px;
}
.arknights div:nth-of-type(13){
	position: absolute;
	height: 150px;
	top: 0px;
	left: 1120px;
}
.arknights div:nth-of-type(14){
	position: absolute;
	height: 150px;
	top: 150px;
	left: 1120px;
}
.arknights div:nth-of-type(15){
	position: absolute;
	height: 150px;
	top: 300px;
	left: 1120px;
}
.arknights div:nth-of-type(16){
	position: absolute;
	top: 450px;
	left: 1120px;
}
.fifth{
	overflow: hidden;
	position: relative;
	height: 52vw;
	background: url(../images/wallfoot.png) no-repeat center;
	background-color: #FFFFFF;
	color: #000000;
	overflow: hidden;
}
.football{
	width: 1400px;
	height: 897px;
	background-color: rgba(40,44,53,0.9);
	margin: 50px auto 0;
	position: relative;
	overflow: hidden;
}
.football div{
	float: left;
	margin-top: 110px;
	margin-left: 110px;
	width: 320px;
	height: 600px;
	background-color: rgba(80,150,160,0.4);
	overflow: hidden;
}
.football div h2{
	margin-top: 50px;
	font-size: 20px;
	text-align: center;
	line-height: 50px;
	color: #FFFFFF;
}
.football div p{
	margin-top: 50px;
	text-indent: 2em;
	color: #FFFFFF;
	font-size: 18px;
}
@keyframes ftba{
	from{transform: rotate(0deg);}
	to{transform: rotate(360deg);}
}
.football div img{
	width: 100%;
	opacity: 0.6;
	margin-top: 100px;
	animation: ftba 10s infinite linear;
	
}
.sixth{
	overflow: hidden;
	position: relative;
	height: 52vw;
	background: url(../images/inbg.png) no-repeat center;
	color: #000000;
	overflow: hidden;
}
.sixth .six-s{
	position: relative;
}
.sixth .six-s:nth-of-type(2){
	top: 400px;
	left: -200px;
	transform: scale(0.8);
}
.sixth .six-s:nth-of-type(3){
	top: 700px;
	left: 50px;
	transform: scale(0.6);
}
.sixth .six-s div{
	width: 200px;
	height: 300px;
	background-color: red;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px ;

}
@keyframes ss{
	0%{transform: scale(0.9) rotate(45deg);}
	50%{transform: scale(1.1) rotate(45deg);}
	100%{transform: scale(0.9) rotate(45deg);}
}
@keyframes ssi{
	0%{transform: scale(0.9) rotate(-45deg);}
	50%{transform: scale(1.1) rotate(-45deg);}
	100%{transform: scale(0.9) rotate(-45deg);}
}
.sixth .six-s div:nth-of-type(1){
	position: absolute;
	top: 50px;
	left: 600px;
	animation: ss 15s infinite linear;
	transform: rotate(45deg);
	transform-origin: right bottom;
}
.sixth .six-s div:nth-of-type(2){
	position: absolute;
	top: 50px;
	left: 800px;
	transform: rotate(-45deg);
	animation: ssi 15s infinite linear;
	transform-origin: left bottom;
}